<template>
  <div id="container">
    <el-container>
      <el-header>
        <img class="logo" src="../assets/image/logo2.png" />
        <!-- 导航菜单 -->
        <el-menu
          :router="true"
          :default-active="activePath"
          mode="horizontal"
        >
          <el-menu-item index="/index" @click="hightLightMenu('/index')">首页</el-menu-item>
          <el-menu-item index="/movie"  @click="hightLightMenu('/movie')">电影</el-menu-item>
          <el-menu-item index="/layout"  @click="hightLightMenu('/shop')">排片表</el-menu-item>
        </el-menu>

        <el-input
          class="search"
          v-model="searchContent"
          placeholder="请输入电影名或演员"
        >
          <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
        </el-input>
        <span class="span_avatar">
          <el-dropdown placement="bottom" @command="handleCommand">
            <span>
               <el-avatar :size="50" :src="avatarUrl"></el-avatar>
               <span>{{memberName}}</span>
  <i class="el-icon-caret-bottom"></i>
            </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item v-if="loginStatus" command="/myOrder">我的订单</el-dropdown-item>
    <el-dropdown-item v-if="loginStatus" command="/basicInfo">个人信息</el-dropdown-item>
    <el-dropdown-item v-if="loginStatus" command="logout">退出登录</el-dropdown-item>
    <el-dropdown-item v-if="!loginStatus" command="/login">登录</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
          
          </span>        
       
      </el-header>
      <div class="nav_placeHolder"></div>
      <keep-alive>
   <router-view v-if='$route.meta.keepAlive'></router-view>
</keep-alive><router-view v-if='!$route.meta.keepAlive'></router-view>

    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl:require('/src/assets/image/defaultUser.png'),
      searchContent: "",
      activePath: "",
      imgList: [
        { url: "../assets/image/1.jpg" },
        { url: "../assets/image/2.jpg" },
        { url: "../assets/image/3.jpg" },
      ],
      loginStatus:false,
      memberName:'',
      query:{},
      currentRoute:''
    };
  },
  methods: {
    handleCommand(common){
     if(common == 'logout'){
       this.logout()
     }
     else{
       this.$router.push(common)
     }
    },
    hightLightMenu(activePath){
      // this.activePath = activePath
      // sessionStorage.setItem('activePath',activePath)
    },
    search(){
      this.query.filmName = this.searchContent
      this.query.actorName = this.searchContent
      this.$router.push({
        path:'/search',
        query:this.query
      })
    },
    logout(){
      sessionStorage.clear()
      location.reload()  
    }

  },
  created(){
    let avatar = sessionStorage.getItem('avatar')
    this.avatarUrl = avatar==null?this.avatarUrl:avatar
    let memberName = sessionStorage.getItem('memberName')
    this.memberName = memberName==null?'':memberName
    console.log(sessionStorage.getItem("memberId"))
    // this.activePath = sessionStorage.getItem('activePath') == '' ? '/index' : sessionStorage.getItem('activePath')
    if(sessionStorage.getItem("memberId")){
      this.loginStatus = true
    }
  this.activePath = "/"+this.$route.name
  
  },
  beforeUpdate(){
this.activePath = "/"+this.$route.name
  },
    watch:{
      $route(to, from) {
          this.currentRoute = this.$route.meta.keepAlive
      }
  },




};
</script>

<style lang="less" scoped>
#container {
  height: 100%;
  .el-menu-item {
    font-size: 20px;
    margin-top: 19px;
    font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
  }
}
.el-container {
  height: 100%;
}
.el-header {
  width: 100%;
  height: 95px !important;
  margin: 0 auto;
  margin-bottom: 20px;
  position: fixed;
  z-index: 999;
  background-color: #fff;
  border-bottom: solid 1px #e6e6e6;
}
.nav_placeHolder{
  height:134px ;
}
.el-menu.el-menu--horizontal {
    border-bottom: none;
}
.el-aside {
  width: 65% !important;
  height: 100%;
}
.el-main {
  height: 100%;
}
.el-menu {
  height: 100%;
  display: inline-block;
}
.logo {
  width: 152px;
  height: 100%;
  margin-right: 10px;
  margin-left: 106px;
}
.search {
  width: 200px;
  top: -42px;
  left: 64px;
  .el-input__icon {
    cursor: pointer;
  }
}
.span_avatar {
  float: right;
  margin-top: 20px;
  margin-right: 30px;
  /deep/img{
    width: 50px;
    height: 50px;
  }
}
.el-carousel {
  width: 100%;
  height: 450px;
}
h2 {
  font-size: 26px;
  font-weight: 400;
  color: red;
}
.aside-content {
  margin: 0 auto;
  width: 865px;
}
.el-avatar--circle {
    border: 1px solid rgba(0, 0, 0, 0.23);
}
</style>